<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue</title>
    <script src="https://assets.pyecharts.org/assets/echarts.min.js" type="text/javascript"></script>
    <script src="https://assets.pyecharts.org/assets/maps/china-cities.js" type="text/javascript"></script>
    <script src="https://assets.pyecharts.org/assets/maps/guang3_xi1_liu3_zhou1.js" type="text/javascript"></script>
    <script src="https://assets.pyecharts.org/assets/maps/guang3_xi1_nan2_ning2.js" type="text/javascript"></script>
    <script src="https://assets.pyecharts.org/assets/maps/guang3_dong1_guang3_zhou1.js" type="text/javascript"></script>
    <script src="https://assets.pyecharts.org/assets/maps/guang3_dong1_shen1_zhen4.js" type="text/javascript"></script>
    <script src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js" type="text/javascript"></script>
    <script src="https://assets.pyecharts.org/assets/echarts-gl.min.js" type="text/javascript"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    

  </head>
  <body>
    <button class="btn position-absolute text-white " type="button" data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">切換城市 》</button>

    <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
        <div class="offcanvas-header">
            <div class="col">
                <input v-model="search" placeholder="搜索" class="form-control">
            </div>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="btn-group">
                <button @click="city=item" type="button" class="btn" data-bs-dismiss="offcanvas"
                    v-for="item in filtered">{{item}}</button>
            </div>
        </div>
    </div>
    <div class="box">

        <div class="chart-container c0bc54089a2ff40cdb84952c865fbe776" id="0bc54089a2ff40cdb84952c865fbe776">
        </div>
            <!-- <script src="./src/header.js"></> -->
        <br />

        <div class="chart-container" id="edc0db84a201493da0749f2c3b80156c"
            style="width:50%;height:60%;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%)"></div>
        <!-- <script src="./map.js"></script> -->

        <br />
        <div class="chart-container" id="6fe48f38dfde442f92c7ed78df54d00a"
            style="width:42%;height:30%;position:absolute;left:50%;bottom:3%;transform:translate(-50%);background:linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) right bottom no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right bottom no-repeat;background-size: 3px 50%, 50% 3px, 3px 50%, 50% 3px;background-color: rgba(255,255,255,0.1);">
        </div>
        <!-- <script src="./district_Count_Bar.js"></script> -->

        <br />
        <div class="chart-container" id="569658cffb59492e893aa8e5ce698502"
            style="width:27%;height:38%;position:absolute;bottom:3%;;left:1.5%;background:linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) right bottom no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right bottom no-repeat;background-size: 3px 50%, 50% 3px, 3px 50%, 50% 3px;background-color: rgba(255,255,255,0.1);">
        </div>
        <!-- <script src="./salary_Bar.js"></script> -->

        <br />
        <div class="chart-container" id="edd28075871a417bae7a5e659b18f8e7"
            style="width:27%;height:42%;position:absolute;bottom:3%;right:1.5%;background:linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) right bottom no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right bottom no-repeat;background-size: 3px 50%, 50% 3px, 3px 50%, 50% 3px;background-color: rgba(255,255,255,0.1);">
        </div>
        <!-- <script src="./wordCloud.js"></script> -->

        <br />
        <div class="chart-container" id="7903886550954bf486a1fa98a1b03658"
            style="width:27%;height:41%;position:absolute;top:12%;right:1.5%;background:linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) right bottom no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right bottom no-repeat;background-size: 3px 50%, 50% 3px, 3px 50%, 50% 3px;background-color: rgba(255,255,255,0.1);">
        </div>
        <!-- <script src="./pie.js"></script> -->

        <br />
        <div class="chart-container" id="078dfb2cc1524938896b1621e1e0401f"
            style="width:27%;height:45%;position:absolute;top:12%;left:1.5%;background:linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left top no-repeat,linear-gradient(to bottom, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right top no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to right, #09cacc, rgba(255,255,255,0)) left bottom no-repeat,linear-gradient(to top, #09cacc, rgba(255,255,255,0)) right bottom no-repeat,linear-gradient(to left, #09cacc, rgba(255,255,255,0)) right bottom no-repeat;background-size: 3px 50%, 50% 3px, 3px 50%, 50% 3px;background-color: rgba(255,255,255,0.1);">
        </div>
        <!-- <script src="./3D_bar.js"></script> -->
        <br />

    </div>
  </body>
</html>
